<template>
  <div :style="back">
    <div class="block">
      <el-carousel :interval="3000" type="card" height="200px">
        <el-carousel-item v-for="item in 6" :key="item">
          <!-- <h3 class="medium">{{ item }}</h3> -->
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-row :gutter="20" class="mid">
      <el-col :span="12">
        <div class="grid-left">
          <div>
            <el-tabs
              v-model="activeName"
              @tab-click="handleClick"
              type="border-card"
            >
              <el-tab-pane label="最近更新" name="first">
                <el-table :data="latestUpload">
                  <el-table-column
                    prop="filename"
                    label="文件名称"
                    width="300px"
                  ></el-table-column>
                  <el-table-column
                    prop="uploadTime"
                    label="上传时间"
                  ></el-table-column>
                  <el-table-column label="所属专题"
                    ><template slot-scope="scope">
                      <span>{{ topics[scope.row.topic] }}</span>
                    </template></el-table-column
                  >
                  <el-table-column
                    prop="summary"
                    label="摘要信息"
                  ></el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="下载最多" name="third">
                <el-table :data="mostDownload">
                  <el-table-column
                    prop="filename"
                    label="文件名称"
                    width="300px"
                  ></el-table-column>
                  <el-table-column
                    prop="summary"
                    label="摘要信息"
                  ></el-table-column>
                  <el-table-column
                    prop="download"
                    label="下载次数"
                  ></el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="浏览最多" name="forth">
                <el-table :data="mostView">
                  <el-table-column
                    prop="filename"
                    label="文件名称"
                    width="300px"
                  ></el-table-column>
                  <el-table-column
                    prop="fileType"
                    label="文件类型"
                  ></el-table-column>
                  <el-table-column
                    prop="views"
                    label="浏览次数"
                  ></el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="grid-rightoverview zhutici">
          <el-row type="flex" class="Dataoverview">
            <!-- url('../assets/images/main1.png'); -->
            <i class="el-icon-folder icondata"></i>
            <span class="worddata">主题词</span>
          </el-row>
          <el-row type="flex" class="">
            <span class="worddata"
              >流量({{
                themeNum.get("流量") == null ? 0 : themeNum.get("流量")
              }})</span
            >
          </el-row>
          <el-row type="flex" class="">
            <span class="worddata"
              >咸宁({{
                themeNum.get("咸宁") == null ? 0 : themeNum.get("咸宁")
              }})</span
            >
          </el-row>
          <el-row type="flex" class="">
            <span class="worddata"
              >水利年鉴({{
                themeNum.get("水利年鉴") == null ? 0 : themeNum.get("水利年鉴")
              }})</span
            >
          </el-row>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-rightoverview">
          <el-row type="flex" class="Dataoverview">
            <!-- url('../assets/images/main1.png'); -->
            <i class="el-icon-notebook-1 icondata"></i>
            <span class="worddata">专题图片</span>
          </el-row>
          <el-row :gutter="10" type="flex" class="">
            <el-col :span="8">
                <router-link to="/components/dataService/serviceone"
              ><el-image :src="src1" style=""></el-image></router-link
            >
            </el-col>
            <el-col :span="8">
                 <router-link to="/components/dataService/servicetwo"
              > <el-image :src="src2" style=""></el-image></router-link
            >
            </el-col>
            <el-col :span="8">
                  <router-link to="/components/dataService/servicethree"
              ><el-image :src="src3" style=""></el-image></router-link
            >
              
            </el-col>
          </el-row>
          <el-row :gutter="10" type="flex" class="">
            <el-col :span="8">
                <router-link to="/components/dataService/servicefour"
              > <el-image :src="src4" style=""></el-image></router-link
            >
             
            </el-col>
            <el-col :span="8">
               <router-link to="/components/dataService/servicefive"
              ><el-image :src="src5" style=""></el-image></router-link
            >
              
            </el-col>
            <el-col :span="8">
                <router-link to="/components/dataService/servicesix"
              ><el-image :src="src6" style=""></el-image></router-link
            >
              
            </el-col>
          </el-row>
          <el-row :gutter="20" type="flex" class="">
            <el-col :span="8">
               <router-link to="/components/dataService/serviceseven"
              > <el-image :src="src7" style=""></el-image></router-link
            >
             
            </el-col>
            <el-col :span="8">
                 <router-link to="/components/dataService/serviceseight"
              ><el-image :src="src8" style=""></el-image></router-link
            >
              
            </el-col>
            <el-col :span="8">
                <router-link to="/components/dataService/servicesnine"
              > <el-image :src="src9" style=""></el-image></router-link
            >
             
            </el-col>
          </el-row>
        </div>
        <div class="grid-rightoverview">
          <el-row type="flex" class="Dataoverview">
            <!-- url('../assets/images/main1.png'); -->
            <i class="el-icon-s-data icondata"></i>
            <span class="worddata"> 数据概况 </span>
          </el-row>
          <el-row type="flex" class="">
            <i class="el-icon-document icondata"></i>
            <span class="worddata">平台文件数据总量: {{ byteSize }}</span>
          </el-row>
          <el-row type="flex" class="">
            <i class="el-icon-download icondata"></i>
            <span class="worddata">累计下载次数: {{ download }}次 </span>
          </el-row>
          <el-row type="flex" class="">
            <i class="el-icon-download icondata"></i>
            <span class="worddata">累计浏览次数: {{ views }}次 </span>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getTopFiles } from "../Api/api";
import { getAllFileSize } from "../Api/api";
import { getAllSize } from "../Api/api";

import { getTopicNum } from "../Api/api";
import { getTheme } from "../Api/api";
import bus from "../Api/bus.js";
export default {
  name: "mainpage", // 给name赋值时，不能使用和html中的标签重复的名字
  data() {
    return {
      byteSize: 0,
      download: 0,
      views: 0,
      keywordNum: [],
      src1: require("../assets/images/fhkh.png"),
      src2: require("../assets/images/hlsx.png"),
      src3: require("../assets/images/shj.png"),
      src4: require("../assets/images/slgc.png"),

      src5: require("../assets/images/sw.png"),
      src6: require("../assets/images/szy.png"),
      src7: require("../assets/images/tjnj.png"),
      src8: require("../assets/images/zjgh.png"),
      src9: require("../assets/images/dlkj.png"),
        // background-image: url("../assets/images/main1.png");

      back: {
        // 背景图片
        //  backgroundImage:'url(' + require('./banner.jpg') + ')',
        // background: "#c1c1c121",
        // backgroundRepeat: "no-repeat",
        // backgroundSize: "cover",
        // width: "100%",
        // height: "100%",
      },
      searchResult: {}, // 检索结果
      activeName: "first", // 默认激活的tab
      latestUpload: [],
      mostDownload: [],
      mostView: [],
      topics: [
        "防洪抗旱",
        "河流水系",
        "水环境",
        "水利工程",
        "水文",
        "水资源",
        "统计年鉴",
        "政策规划",
        "地理空间",
        "其他",
      ],
      themes: ["流量", "咸宁", "水利年鉴"],
      themeNum: new Map(),
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getTopFiles() {
      let that = this;
      getTopFiles({ fieldName: "uploadTime" }).then(function (res) {
        if (res.status === 200 && res.data.code === 0) {
          that.latestUpload = res.data.data;
        }
      });
      getTopFiles({ fieldName: "download" }).then(function (res) {
        if (res.status === 200 && res.data.code === 0) {
          that.mostDownload = res.data.data;
        }
      });
      getTopFiles({ fieldName: "views" }).then(function (res) {
        if (res.status === 200 && res.data.code === 0) {
          that.mostView = res.data.data;
        }
      });
      getAllSize().then(function (res) {
        if (res.status === 200 && res.data.code === "0") {
          // let bytes = res.data.num;
          // bytes = Math.round((bytes / (1024 * 1024 * 1024)) * 100) / 100;
          // that.byteSize = bytes;
         
          that.byteSize=res.data.data;
        }
      });
      getAllFileSize({ fieldName: "download" }).then(function (res) {
        if (res.status === 200 && res.data.code === 0) {
          that.download = res.data.num;
        }
      });
      getAllFileSize({ fieldName: "views" }).then(function (res) {
        if (res.status === 200 && res.data.code === 0) {
          that.views = res.data.num;
        }
      });
      getTopicNum({ topic: "0" }).then(function (res) {
        if (res.status === 200 && res.data.code === 0) {
          that.keywordNum = res.data.num;
        }
      });
      that.themes.forEach((theme, index, array) => {
        getTheme({ theme: theme }).then(function (res) {
          if (res.status === 200 && res.data.code === 0) {
            that.themeNum.set(theme, res.data.num);
          }
        });
      });
    },
  },
  mounted: function () {
    this.getTopFiles();
    this.timer = setInterval(this.getTopFiles, 10000);
  },
};
</script>

<style scoped>
.zhutici {
  margin-top: 22px;
}

.block {
  margin-left: 10%;
  width: 80%;
  padding-top: 50px;
  padding-bottom: 50px;
}
/* .el-carousel__item h3 { */
/* color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0; */
/* } */

.el-carousel__item:nth-child(2n) {
  /* background-color: #99a9bf; */
  background-image: url("../assets/images/main1.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
  background-image: url("../assets/images/huake.jpg");
  background-repeat: no-repeat;
background-size: 100% 100%;
}
.mid {
  width: 90%;
  margin-left: 5% !important;
}
.el-row {
  margin-bottom: 20px;
}

.box {
  margin-top: 10px;
  width: 300px;
  height: 60px;
  border-left: 20px;
  opacity: 0.9;
}
.grid-rightoverview {
  border: 1px solid #dcdfe6;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
  padding: 10px;
  color: #606266;
  margin-bottom: 20px;
}
.Dataoverview {
  height: 30px;
  border-bottom: 1px solid #dcdfe6;
}
.icondata {
  padding-top: 3px;
}
.worddata {
  margin-left: 5px;
}
.grid-left .el-tabs--border-card > .el-tabs__content {
  padding: 15px;
}
</style>
